<!--水波球-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>
  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import 'echarts-liquidfill/src/liquidFill.js';

  const _this = {
    name: 'WaterBallChart',
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({

        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          waterWaveNum: 4,
          color: [],
          backgroundStyle: {
            borderWidth: 5, // 内边框宽度
            borderColor: '#1daaeb', // 内边框颜色
            color: '#fff' // 表盘颜色
          },
          itemStyle: {
            borderWidth: 10,
            startColor: 'rgba(69, 73, 240, 1)',
            centerColor: 'rgba(69, 73, 240, .25)',
            endColor: 'rgba(69, 73, 240, 0)',
            shadowBlur: 0,
            shadowColor: '#000',
          },
          label: {
            suffixText: '%',
            textStyle: {
              color: '#333',
              insideColor: '#fff',
              fontSize: 20
            }
          },
          series: {
            radius: '90%',
            shape: 'circle'
          }
        },

      }, PnDesigner.buildFuncCompDatasourceField({
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          },
        ],
        ds_resultObj: [
          {
            name: '占比',
            value: 0.2
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {

      init() { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode()
        });
      }

    },
    computed: {
      chartOption() {

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          graphic: [{
            type: 'group',
            left: 'center',
            bottom: 10
          }],
          series: [
            {
              type: 'liquidFill',
              radius: this.component.compConfigData.chartOption.series.radius,
              center: ['50%', '50%'],
              data: [],
              zlevel: 1,
              shape: this.component.compConfigData.chartOption.series.shape,
              backgroundStyle: {
                borderWidth: this.component.compConfigData.chartOption.backgroundStyle.borderWidth, // 内边框宽度
                borderColor: this.component.compConfigData.chartOption.backgroundStyle.borderColor, // 内边框颜色
                color: this.component.compConfigData.chartOption.backgroundStyle.color // 表盘颜色
              },
              outline: {
                borderDistance: 0,
                itemStyle: {
                  borderWidth: this.component.compConfigData.chartOption.itemStyle.borderWidth,
                  borderColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0,
                      color: this.component.compConfigData.chartOption.itemStyle.endColor
                    }, {
                      offset: 0.5,
                      color: this.component.compConfigData.chartOption.itemStyle.centerColor
                    }, {
                      offset: 1,
                      color: this.component.compConfigData.chartOption.itemStyle.startColor
                    }],
                    globalCoord: false
                  },
                  shadowBlur: this.component.compConfigData.chartOption.itemStyle.shadowBlur,
                  shadowColor: this.component.compConfigData.chartOption.itemStyle.shadowColor,
                }
              },
              label: {
                normal: {
                  formatter: (params) => {
                    return (params.value * 100).toFixed(0) + this.component.compConfigData.chartOption.label.suffixText
                  },
                  color: this.component.compConfigData.chartOption.label.textStyle.color,
                  insideColor: this.component.compConfigData.chartOption.label.textStyle.insideColor,
                  fontSize: this.component.compConfigData.chartOption.label.textStyle.fontSize
                }
              },
            }
          ]
        };

        if (this.component.compConfigData.chartOption.color.length > 0) {
          option.series[0].color = this.component.compConfigData.chartOption.color
        }else {
          delete option.series[0].color
        }

        for (let i=0; i < this.component.compConfigData.chartOption.waterWaveNum; i++) {
          option.series[0].data.push(this.runCustomFilter(this.component.compConfigData.ds_resultObj)[0])
        }

        if (!this.$store.state.release.pageMetadata) {
          option.series[0].waveAnimation = false
          option.series[0].animationDuration = 0
          option.series[0].animationDurationUpdate = 0
        }

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
